<template>
  <el-container direction="vertical" class="container">
    <el-row>
      <el-col :span="16">
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
          <el-form-item label="时间段">
            <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              :default-time="['00:00:00', '23:59:59']"
              value-format="yyyy-MM-dd"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          style="width: 100%;height: 545px;"
          max-height="545"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <h3 style="margin: 0 0 5px 0;">营收详情</h3>
              <el-descriptions v-for="(item,index) in props.row.serviceList" :key="index" direction="vertical" border>
                <el-descriptions-item label="服务名称">{{ item.serviceName }}</el-descriptions-item>
                <el-descriptions-item label="材料名称">{{ item.materialName }}</el-descriptions-item>
                <el-descriptions-item label="材料数量">{{ item.number }}</el-descriptions-item>
              </el-descriptions>
              <!-- <div v-for="(item,index) in props.row.serviceList" :key="index"><span>{{ item.serviceId }}</span></div> -->
            </template>
          </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="50"
            align="center"
          />
          <el-table-column
            label="营收编号"
            prop="id"
            align="center"
          />
          <!-- <el-table-column
            label="状态"
            prop="status"
          >
            <template slot-scope="scope">
              <el-tag
                :type="statusHandler(scope.$index,scope.row)"
                disable-transitions
              >{{ scope.row.status }}</el-tag>
            </template>
          </el-table-column> -->
          <!-- <el-table-column
            label="预约时间"
            prop="agreeTime"
          />
          <el-table-column
            label="开始时间"
            prop="startTime"
          /> -->
          <el-table-column
            label="营收时间"
            prop="endTime"
            align="center"
          />
          <el-table-column
            label="营收金额(元)"
            prop="cost"
            align="center"
          />
          <!-- <el-table-column
            label="发起人"
            prop="customer"
          /> -->
          <!-- <el-table-column label="操作" width="150" fixed="right">
            <template slot-scope="scope">
              <el-button
                size="medium"
                icon="el-icon-edit-outline"
                title="编辑"
                round
                @click="editHandler(scope.$index, scope.row)"
              />
              <el-button
                v-if="false"
                size="medium"
                type="danger"
                title="删除"
                icon="el-icon-delete"
                round
                @click="handleDelete(scope.$index, scope.row)"
              />
            </template>
          </el-table-column> -->
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <div class="totalRow">
        <span v-show="searchForm.dateRange">
          <i class="startTime">{{ searchForm.dateRange[0] }}</i>至
          <i class="endTime">{{ searchForm.dateRange[1] }}</i>
        </span>
        <label for="">总营收：</label>
        <span>{{ totalIncome }}元</span>
      </div>
    </el-row>
    <!-- <el-row>
      <el-col>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page="tableQuery.page"
          :page-size="tableQuery.pageSize"
          :hide-on-single-page="isHidePage"
          @current-change="handleCurrentChange"
          @prev-click="handleCurrentChange"
          @next-click="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <keep-alive>
      <edit-dialog
        :id="chooseData.id"
        :dialog-visible="dialogFormVisible"
        @closeDialog="closeHandler"
        @getTable="getTable"
      />
    </keep-alive> -->

    <!-- <notice-dialog :dialog-visible="dialogFormVisible" :close-dialog="closeDialog" /> -->

  </el-container>

</template>

<script>
import { getOrderList } from '@/api/myOrder'
// import { getToken } from '@/utils/auth'
import { parseTime } from '@/utils/index'
// import { Message, MessageBox } from 'element-ui'
import { getServiceInfo } from '@/api/beautyService'
import { getStockMaterialInfo } from '@/api/stock'
export default {
  name: 'Profit',
  data() {
    return {
      searchForm: {
        dateRange: ''
      },
      listLoading: true, // 列表加载动画
      currUser: this.$store.getters.roles, // 获取当前登录用户角色
      tableData: null, // 表格数据
      // total: 0, // 表格总数
      // isHidePage: false, // 是否隐藏分页
      tableQuery: { // 表格查询参数
        // page: 1,
        // pageSize: 5,
        // customer: '',
        status: '已结束',
        startTime: '',
        endTime: ''
        // token: getToken()
      },
      formatTime: {
        formatStartTime: '',
        formatEndTime: ''
      },
      totalIncome: 0
      // dialogFormVisible: false, // 对话框是否隐藏
      // chooseData: {
      //   id: ''
      // }
    }
  },
  created() {
    this.getTable()
    // this.formatDate()
  },
  updated() {
    // this.formatDate()
  },
  // activated() {
  //   this.$on('dialogClose', this.dialogFormVisible = false)
  // },
  methods: {
    // editHandler(index, row) {
    //   this.chooseData.id = row.id
    //   this.dialogFormVisible = true
    //   this.dialogTitle = '编辑订单'
    // },
    // closeHandler() {
    //   this.dialogFormVisible = false
    //   this.chooseData = {
    //     id: ''
    //   }
    // },
    onSubmit() {
      this.tableQuery.startTime = this.searchForm.dateRange[0]
      this.tableQuery.endTime = this.searchForm.dateRange[1]
      this.getTable()
    },
    getTable() {
      this.totalIncome = 0
      this.listLoading = true
      getOrderList(this.tableQuery).then(response => {
        if (response) {
          const orderList = response.data.list
          orderList.forEach(element => {
            element.endTime = parseTime(element.endTime, '{y}-{m}-{d}')
            element.serviceList.forEach(element => {
              this.getServiceName(element.serviceId).then(res => {
                element.serviceName = res
              })
              if (element.materialId) {
                this.getMaterialInfo(element.materialId).then(res => {
                  element.materialName = res
                })
              }
            })
            this.totalIncome += element.cost
          })
          this.tableData = orderList
          // this.total = response.data.total
          setTimeout(() => {
            this.listLoading = false
          }, 1 * 1000)
        }
        this.listLoading = false
      })
      // if (this.total / this.tableQuery.pageSize <= 1) {
      //   this.isHidePage = true
      // }
      // if(this.$store.getters.roles)
    },
    // handleCurrentChange(val) {
    //   this.tableQuery.page = val
    //   this.getTable()
    // },
    // handlePreClick(val) {
    //   this.tableQuery.page = val
    //   this.getTable()
    // },
    // handleNextClick(val) {
    //   this.tableQuery.page = val
    //   this.getTable()
    // },
    async getServiceName(id) {
      const res = await getServiceInfo(id)
      return res.data.data.name
    },
    async getMaterialInfo(id) {
      const res = await getStockMaterialInfo(id)
      return res.data.data.name + '：' + res.data.data.introduction
    },
    formatDate() {
      if (this.searchForm.dateRange) {
        this.formatStartTime = parseTime(this.searchForm.dateRange[0], '{y}-{m}-{d}')
        this.formatEndTime = parseTime(this.searchForm.dateRange[1], '{y}-{m}-{d}')
      }
    }
    // statusHandler(index, row) {
    //   if (row.status === '预约成功') {
    //     return 'success'
    //   } else if (row.status === '预约失败') {
    //     return 'danger'
    //   } else if (row.status === '预约中') {
    //     return 'warning'
    //   } else if (row.status === '已结束') {
    //     return 'info'
    //   } else {
    //     return 'primary'
    //   }
    // }
    // handleDelete(index, row) {
    //   MessageBox.confirm('将删除该公告, 是否继续?', '提示', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning'
    //   }).then(() => {
    //     delNotice(row.id).then(response => {
    //       Message({
    //         message: response.data.message,
    //         type: 'success',
    //         duration: 5 * 1000
    //       })
    //     })
    //     this.getTable()
    //   })
    // }
  }
}
</script>

<style lang="scss" scoped>
.container{
  height: 100%;
  padding: 10px;
  a:hover{
    color: blue;
    text-decoration: underline;
  }
  .totalRow{
    height: 60px;
    padding: 20px;
    background: #f5f5f5;
    i{
      margin-right: 10px;
    }
  }
}
</style>
